Motion >> Repos - motion-next.git/blob

   1 <md-dialog class="userProfile-dialog" aria-label="userProfile">
   2   <form name="userProfileForm" ng-cloak>
   3     <md-toolbar>
   4       <div class="md-toolbar-tools">
   5         <h2>{{vm.title}}</h2>
   6         <span flex></span>
   7         <md-button class="md-icon-button" ng-click="vm.closeDialog($event)">
   8           <md-icon
   9             md-font-icon="icon-close"
  10             aria-label="Close dialog"
  11           ></md-icon>
  12         </md-button>
  13       </div>
  14     </md-toolbar>
  15     <md-dialog-content>
  16       <div layout="column" class="padding-bottom-10">
  17         <div layout="row" class="padding-bottom-10">
  18           <md-input-container flex class="no-margin">
  19             <label translate="STAFF.SECTIONS">Sections</label>
  20             <md-select
  21               name="sections"
  22               ng-model="vm.selectedSection"
  23               placeholder="{{'STAFF.PERMISSIONS_SELECT_SECTION' | translate}}"
  24               ng-change="vm.onChangeSection()"
  25               required
  26             >
  27               <md-option
  28                 ng-value="subsection"
  29                 ng-repeat="subsection in vm.subsections"
  30                 ng-selected="{{vm.subsections.length === 1 ? 'true' : 'false'}}"
  31                 >{{subsection.translate | translate}}</md-option
  32               >
  33             </md-select>
  34           </md-input-container>
  35           <div layout="row" ng-show="vm.selectedSection" class="margin-left-10">
  36             <md-button
  37               ng-switch="vm.selectedSection.enabled"
  38               class="md-icon-button md-fab md-mini size-8 padding-10"
  39               ng-class="vm.selectedSection.enabled ? 'blue-500-bg' : 'grey-A400-bg'"
  40               ng-click="vm.onChangeVisibility()"
  41               aria-label="Visibility"
  42             >
  43               <md-icon
  44                 ng-switch-when="true"
  45                 md-font-icon="icon-eye"
  46                 aria-label="Visible section"
  47               >
  48                 <md-tooltip
  49                   >{{'STAFF.PERMISSIONS_SECTION_HIDE' | translate}}</md-tooltip
  50                 >
  51               </md-icon>
  52               <md-icon
  53                 ng-switch-when="false"
  54                 md-font-icon="icon-eye-off"
  55                 aria-label="Hidden section"
  56               >
  57                 <md-tooltip
  58                   >{{'STAFF.PERMISSIONS_SECTION_SHOW' | translate}}</md-tooltip
  59                 >
  60               </md-icon>
  61             </md-button>
  62             <div>
  63               <md-button
  64                 class="md-icon-button md-fab md-mini size-8 green-A700-bg no-margin"
  65                 ng-disabled="true"
  66               >
  67                 <md-icon
  68                   md-font-icon="icon-monitor"
  69                   class="md-background-fg"
  70                   aria-label="Read permission"
  71                 >
  72                   <md-tooltip
  73                     >{{'STAFF.READ_PERMISSION' | translate}}</md-tooltip
  74                   >
  75                 </md-icon>
  76               </md-button>
  77               <md-button
  78                 class="md-icon-button md-fab md-mini size-8 no-margin"
  79                 ng-class="vm.selectedSection.allowEdit ? 'green-A700-bg' : 'grey-A400-bg'"
  80                 ng-click="vm.setPermission('edit')"
  81               >
  82                 <md-icon
  83                   md-font-icon="icon-pencil"
  84                   aria-label="Edit permission"
  85                 >
  86                   <md-tooltip
  87                     >{{'STAFF.EDIT_PERMISSION' | translate}}</md-tooltip
  88                   >
  89                 </md-icon>
  90               </md-button>
  91               <md-button
  92                 class="md-icon-button md-fab md-mini size-8 no-margin"
  93                 ng-class="vm.selectedSection.allowDelete ? 'green-A700-bg' : 'grey-A400-bg'"
  94                 ng-click="vm.setPermission('delete')"
  95               >
  96                 <md-icon
  97                   md-font-icon="icon-delete"
  98                   aria-label="Delete permission"
  99                 >
 100                   <md-tooltip
 101                     >{{'STAFF.DELETE_PERMISSION' | translate}}</md-tooltip
 102                   >
 103                 </md-icon>
 104               </md-button>
 105             </div>
 106           </div>
 107         </div>
 108         <div
 109           layout="row"
 110           ng-show="vm.selectedSection"
 111           class="margin-left-10"
 112           ng-if="!vm.selectedSection.permissions || vm.selectedSection.permissions.association"
 113         >
 114           <md-switch
 115             ng-model="vm.selectedSection.autoAssociation"
 116             class="no-margin padding-right-10"
 117             aria-label="Auto association"
 118             ng-change="vm.onChangeAutoAssociation()"
 119           >
 120           </md-switch>
 121           <p class="no-margin font-size-12 line-height-30">
 122             {{'STAFF.PERMISSIONS_AUTO_ASSOCIATION_INFO' | translate}}
 123           </p>
 124         </div>
 125         <div
 126           layout="row"
 127           ng-show="vm.selectedSection && vm.selectedSection.title === 'Reports' && !vm.selectedSection.autoAssociation"
 128           class="margin-bottom-10 margin-top-30"
 129           ng-if="!vm.selectedSection.permissions || vm.selectedSection.permissions.association"
 130         >
 131           <md-input-container flex class="no-margin">
 132             <label translate="STAFF.REPORT_TYPE">Report Type</label>
 133             <md-select
 134               name="type"
 135               ng-model="vm.selectedSection.reportType"
 136               placeholder="{{'STAFF.PERMISSIONS_SELECT_REPORT_TYPE' | translate}}"
 137               ng-change="vm.onChangeReportType()"
 138               required
 139             >
 140               <md-option ng-value="'default'">Default</md-option>
 141               <md-option ng-value="'custom'">Custom</md-option>
 142             </md-select>
 143           </md-input-container>
 144         </div>
 145         <div
 146           ng-show="vm.selectedSection && vm.selectedSection.title === 'Dashboards'"
 147           class="user-profile-section-help margin-bottom-10 margin-top-20"
 148         >
 149           <md-icon
 150             md-font-icon="icon-help"
 151             aria-label="Dashboards help"
 152           ></md-icon>
 153           <span
 154             class="no-margin font-size-12 line-height-30"
 155             translate="STAFF.HELP.CUSTOM_DASHBOARDS_PERMISSIONS"
 156           ></span>
 157         </div>
 158       </div>
 159       <ms-dual-multiselect
 160         options="vm.dualMultiselectOptions"
 161         ng-if="!vm.selectedSection.permissions || vm.selectedSection.permissions.association"
 162         ng-hide="vm.selectedSection.autoAssociation"
 163       ></ms-dual-multiselect>
 164     </md-dialog-content>
 165     <md-dialog-actions layout="row" layout-align="end center">
 166       <div>
 167         <md-icon
 168           md-font-icon="icon-information-outline"
 169           aria-label="Delete permission"
 170         ></md-icon>
 171         <span
 172           class="no-margin font-size-12 line-height-30"
 173           translate="STAFF.HELP.SAVE_PERMISSIONS"
 174         ></span>
 175       </div>
 176       <md-button
 177         layout-align="end center"
 178         type="submit"
 179         ng-click="vm.saveSection()"
 180         class="send-button md-accent md-raised"
 181         ng-disabled="!vm.pendingChanges"
 182         aria-label="SAVE"
 183         translate="STAFF.SAVE"
 184         translate-attr-aria-label="STAFF.SAVE"
 185       >
 186         SAVE
 187       </md-button>
 188     </md-dialog-actions>
 189   </form>
 190 </md-dialog>